<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4655903_jbr41w6eqvl.css">
    <link rel="stylesheet" href="./1.css">
</head>
<body>
    <div id="app">
        
        <button class="btn" @click="add">登录</button>
        <div v-if="yc" class="box2">

            <div class="banxin" v-show="appear">

                <div id="log" :style="{backgroundImage:show}" >
        
                    <div class="delete" @click="appear=false"> X</div>
        
                    <div class="wp">
        
                     <div class="code">
        
                        <div class="title">扫描二维码登录</div>
        
                        <div class="QRcode" style="width: 160px;height: 160px;" @mouseover="a=!a" @mouseout="a=!a">
                            <img src="./二维码.png" alt="" v-show="a" style="width: 160px; height: 160px;">
                            <img src="./2.png" alt="" v-show="!a" style="width: 160px; height: 160px;">
                        </div>
        
                        <div class="desc" style="margin-top: 18px;">
        
                            <p> 请使用 <a href="https://app.bilibili.com/" target="_blank">哔哩哔哩客户端</a></p>
        
                            <p>扫码登录或扫码下载APP</p>
        
                        </div>
        
                     </div>
        
                     <div class="xian"></div>
        
                     <div class="logon">
        
                        <div data-v-35ff7abe="" class="login-tab">
        
                            <div data-v-35ff7abe="" class="login-tab-item active-tab" @click="change=0"> 密码登录 </div>
        
                            <div data-v-35ff7abe="" class="login-tab-line"></div>
        
                            <div data-v-35ff7abe="" class="login-tab-item"  @click="change=1"> 短信登录 </div>
                           
                        </div>
                        <div class="box">
               
                            <div :class="{'box1':change===0,'apper':change!=0}">
                                <div class="qbk">
                                    <div class="user">
                                        账号:<input type="text" placeholder="请输入你的账号" style="border: 1px solid transparent;">
                                    </div>
                                  <div class="paw">
                                    密码:<input :type="pw?'text':'password'" v-model="password" placeholder="请输入你的密码" style="border: 1px solid transparent;">
                                    <button @click="add1">
                                       {{ pw? '密码隐藏': '密码显示'}}
                                    </button>
                                    <span class="two">忘记密码？</span>
                                  </div>
                                </div>
                               
                              <div class="one">
                                <button class="btn1" >注册</button>
                                <button class="btn2">登录</button>
                              </div>
                            </div>
                           <div :class="{'box1':change===1,'apper':change!=1}">
                            <div class="three">
                                <div class="q">
                                    <select>
                                        <option v-for="item in list" :key="item.value" :value="item.value" >{{ item.name }}</option> 
                                        <input type="text" placeholder="请输入你的手机号" style="border: 1px solid transparent;"> 
                                        <button>获取验证码</button>
                                    </select>
                                </div>
                                
                                <div class="z">
                                    验证码: <input type="text" placeholder="请输入验证码" style="border: 1px solid transparent;">
                                </div>
                            </div>
                            <div class="box3">
                               <button class="four">登录/注册</button>
                            </div>
                           </div>
                         </div>
        
                     </div>
        
        
        
                    </div>
        
                     <div class="login-agreement-wp">
        
                        <p> 未注册过哔哩哔哩的手机号，我们将自动帮你注册账号 </p>
        
                        <p> 登录或完成注册即代表你同意 <span> 用户协议 </span> 和 <span> 隐私政策 <span class="link_word">
        
                                </span></span></p>
        
                    </div>
        
                </div>
        
           
           
        </div>
    </div>

    </div>
</body>
<script src="Vue.js"></script>
<script>
    const {createApp,ref} = Vue 
    createApp({
        setup(){
        let yc = ref(false)
        let change = ref(0)
        function add(){
            yc.value=true
        }
         let list = ref([{
            name:'+86'
         },
         {
            name:'+852'
         },
         {
            name:'+853'
         },
         {
            name:'+886'
         }
        ]) 
        let password = ref('');
       
            let pw = ref(false);

        function add1 (){
          pw.value =!pw.value;
        };
        
       let img = ref()
        function app1(){
            img.value=ref('./2.png')
        }
        let show = ref('url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/22_open.4ea5f239.png),url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/33_open.f7d7f655.png)')

let show2 = ref('url("https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/22_close.9382a5a8.png"), url("https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/33_close.a8c18fc8.png")')

let show3 = ref('url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/22_open.4ea5f239.png),url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/33_open.f7d7f655.png)')

let appear = ref(true);

let a =ref(true);

let b = ref()            
        return{
            yc,
            add,
            change,
            list,
            password,
            add1,
            pw,
            show,
            show2,
            show3,
            appear,
            a,
            b
        }
        }
    }).mount('#app')
</script>
</html>